<template>
  <AdminLayout>
    <div class="orders-management" style="min-height: calc(100vh - 60px); overflow-x: hidden;">
      <div class="page-header">
        <h2>订单管理</h2>
      </div>
      
      <div class="search-filter">
        <div class="search-filter-left">
          <div class="search-box">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11 19C15.42 19 19 15.42 19 11C19 6.58 15.42 3 11 3C6.58 3 3 6.58 3 11C3 15.42 6.58 19 11 19ZM21 21L16.65 16.65" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <input type="text" placeholder="搜索订单号或客户名..." v-model="searchQuery"/>
          </div>
          <div class="filter-select" style="margin-left: 20px;">
            <select v-model="statusFilter">
              <option value="all">全部状态</option>
              <option value="pending">待处理</option>
              <option value="processing">处理中</option>
              <option value="shipped">已发货</option>
              <option value="delivered">已送达</option>
              <option value="canceled">已取消</option>
            </select>
          </div>
          <div class="date-range">
            <label>日期范围：</label>
            <input type="date" v-model="startDate"/>
            <span>至</span>
            <input type="date" v-model="endDate"/>
          </div>
          <div class="search-actions" style="margin-left: 200px;">
            <button class="import-button" @click="importOrders">
              导入
            </button>
            <button class="export-button" @click="exportOrders">
              导出
            </button>
            <button class="batch-delete-button" @click="batchDeleteOrders" :disabled="selectedOrders.length === 0">
              删除
            </button>
            <button class="search-button" @click="performSearch">
              搜索
            </button>
            <button class="reset-button" @click="resetFilters">
              重置
            </button>
            <button class="add-button" @click="showAddOrderModal = true">
              新增
            </button>
          </div>
        </div>
      </div>
      
      <div class="orders-table-container">
        <table class="orders-table">
          <thead>
            <tr>
              <th width="50">
                <input type="checkbox" class="select-all-checkbox" v-model="selectAll" @change="toggleSelectAll">
              </th>
              <th>订单号</th>
              <th>客户</th>
              <th>联系电话</th>
              <th>地址</th>
              <th>快递单号</th>
              <th>产品</th>
              <th>金额</th>
              <th>日期</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="order in filteredOrders" :key="order.id">
              <td>
                <input type="checkbox" :value="order.id" v-model="selectedOrders" class="order-checkbox">
              </td>
              <td class="order-id truncate">{{ order.orderNumber }}</td>
              <td class="truncate">{{ order.customerName }}</td>
              <td class="truncate">{{ order.customerPhone || '-' }}</td>
              <td class="truncate" :title="order.customerAddress">{{ order.customerAddress }}</td>
              <td class="truncate">{{ order.trackingNumber || '-' }}</td>
              <td class="products-cell">
                <div v-for="product in order.products" :key="product.id" class="product-item">
                  {{ product.name }} × {{ product.quantity }}
                </div>
              </td>
              <td class="amount">¥{{ order.totalAmount }}</td>
              <td>{{ formatDate(order.orderDate) }}</td>
              <td>
                <span class="status-badge" :class="order.status">
                  {{ getStatusText(order.status) }}
                </span>
              </td>
              <td>
                <div class="action-buttons">
                  <button class="view-button" @click="viewOrder(order.id)">
                    查看
                  </button>
                  <button class="process-button" v-if="order.status !== 'delivered' && order.status !== 'canceled'" @click="processOrder(order)">
                    {{ getProcessButtonText(order.status) }}
                  </button>
                  <button class="cancel-button" v-if="order.status === 'pending'" @click="cancelOrder(order.id)">
                    取消
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        
        <div v-if="filteredOrders.length === 0" class="no-data">
          <p>暂无订单数据</p>
        </div>
      </div>
      
      <div class="pagination">
        <button 
          class="pagination-button" 
          @click="currentPage = 1" 
          :disabled="currentPage === 1"
        >
          首页
        </button>
        <button 
          class="pagination-button" 
          @click="currentPage--" 
          :disabled="currentPage === 1"
        >
          上一页
        </button>
        <div class="page-numbers">
          <button 
            v-for="page in visiblePages" 
            :key="page"
            class="page-number"
            :class="{ active: page === currentPage }"
            @click="currentPage = page"
          >
            {{ page }}
          </button>
        </div>
        <button 
          class="pagination-button" 
          @click="currentPage++" 
          :disabled="currentPage === totalPages"
        >
          下一页
        </button>
        <button 
          class="pagination-button" 
          @click="currentPage = totalPages" 
          :disabled="currentPage === totalPages"
        >
          末页
        </button>
        <span class="pagination-info">
          第 {{ currentPage }} / {{ totalPages }} 页
        </span>
      </div>
      
      <!-- 订单详情弹窗 -->
      <div v-if="showViewModal" class="modal-overlay" @click="closeViewModal">
        <div class="modal-content view-modal" @click.stop>
          <div class="modal-header">
            <h3>订单详情</h3>
            <button class="close-button" @click="closeViewModal">×</button>
          </div>
         
          <div class="order-info">
            <h4>基本信息</h4>
            <div class="info-row">
              <span class="info-label">订单号：</span>
              <span class="info-value">{{ viewedOrder.orderNumber }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">客户姓名：</span>
              <span v-if="!isEditingOrder" class="info-value">{{ viewedOrder.customerName }}</span>
              <input v-else type="text" v-model="viewedOrder.customerName" class="edit-input"/>
            </div>
            <div class="info-row">
              <span class="info-label">联系电话：</span>
              <span v-if="!isEditingOrder" class="info-value">{{ viewedOrder.customerPhone }}</span>
              <input v-else type="text" v-model="viewedOrder.customerPhone" class="edit-input"/>
            </div>
            <div class="info-row">
              <span class="info-label">下单时间：</span>
              <span class="info-value">{{ formatDateTime(viewedOrder.orderDate) }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">订单状态：</span>
              <span v-if="!isEditingOrder" class="info-value status-{{ viewedOrder.status }}">{{ getStatusText(viewedOrder.status) }}</span>
              <select v-else v-model="viewedOrder.status" class="edit-select">
                <option value="pending">待处理</option>
                <option value="processing">处理中</option>
                <option value="shipped">已发货</option>
                <option value="delivered">已送达</option>
                <option value="canceled">已取消</option>
              </select>
            </div>
            <div class="info-row">
              <span class="info-label">地址：</span>
              <span v-if="!isEditingOrder" class="info-value">{{ viewedOrder.customerAddress }}</span>
              <textarea v-else v-model="viewedOrder.customerAddress" class="edit-textarea" rows="2"></textarea>
            </div>
            <div class="info-row">
              <span class="info-label">物流单号：</span>
              <span v-if="!isEditingOrder" class="info-value">{{ viewedOrder.trackingNumber || '-' }}</span>
              <input v-else type="text" v-model="viewedOrder.trackingNumber" class="edit-input" placeholder="输入物流单号"/>
            </div>
            <div class="info-row">
              <span class="info-label">备注：</span>
              <span v-if="!isEditingOrder" class="info-value">{{ viewedOrder.notes || '-' }}</span>
              <textarea v-else v-model="viewedOrder.notes" class="edit-textarea" placeholder="添加订单备注" rows="3"></textarea>
            </div>
          </div>
          
          <div class="products-info">
            <h4>产品信息</h4>
            <table class="order-products-table">
              <thead>
                <tr>
                  <th>图片</th>
                  <th>产品名称</th>
                  <th>单价</th>
                  <th>数量</th>
                  <th>小计</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="product in viewedOrder.products" :key="product.id">
                  <td>
                    <div class="product-image-container" @click="showImagePreview(product.image)">
                      <img :src="product.image" alt="{{ product.name }}" class="product-thumbnail" />
                    </div>
                  </td>
                  <td>{{ product.name }}</td>
                  <td>¥{{ product.price }}</td>
                  <td>
                    <span v-if="!isEditingOrder">{{ product.quantity }}</span>
                    <input v-else type="number" v-model="product.quantity" class="edit-input-small" min="1"/>
                  </td>
                  <td>¥{{ product.price * product.quantity }}</td>
                </tr>
                <tr class="total-row">
                  <td colspan="3">总计：</td>
                  <td>¥{{ viewedOrder.totalAmount }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <div class="payment-info">
            <h4>支付信息</h4>
            <div class="info-row">
              <span class="info-label">支付方式：</span>
              <span v-if="!isEditingOrder" class="info-value">{{ viewedOrder.paymentMethod }}</span>
              <input v-else type="text" v-model="viewedOrder.paymentMethod" class="edit-input"/>
            </div>
            <div class="info-row" v-if="viewedOrder.paymentStatus">
              <span class="info-label">支付状态：</span>
              <span class="info-value">已支付</span>
            </div>
            <div class="info-row" v-if="viewedOrder.paymentDate">
              <span class="info-label">支付时间：</span>
              <span class="info-value">{{ formatDateTime(viewedOrder.paymentDate) }}</span>
            </div>
          </div>
          
          <!-- 非编辑模式下显示编辑按钮 - 放置在右下方 -->
          <div v-if="!isEditingOrder" class="view-modal-actions">
            <button class="edit-button" @click="switchToEditMode">编辑</button>
          </div>
          
          <!-- 编辑模式下显示保存按钮 -->
          <div v-if="isEditingOrder" class="form-actions">
            <button type="button" class="save-button" @click="saveOrderChangesAndClose">保存</button>
          </div>
        </div>
      </div>
      
      <!-- 图片预览弹窗 -->
      <div v-if="showImagePreview" class="modal-overlay" @click="closeImagePreview">
        <div class="modal-content image-preview-modal" @click.stop>
          <button class="close-button" @click="closeImagePreview">×</button>
          <div class="image-preview-container">
            <img :src="previewImageUrl" alt="预览图片" class="preview-image" />
          </div>
        </div>
      </div>
      
      <!-- 移除原来的编辑订单弹窗 -->
      
      <!-- 新增订单弹窗 -->
      <div v-if="showAddOrderModal" class="modal-overlay" @click="closeAddOrderModal">
        <div class="modal-content add-order-modal" @click.stop>
          <div class="modal-header">
            <h3>新增订单</h3>
            <button class="close-button" @click="closeAddOrderModal">×</button>
          </div>
          
          <div class="order-form">
            <div class="info-row">
              <span class="info-label">客户姓名：</span>
              <input type="text" v-model="newOrder.customerName" class="edit-input" placeholder="请输入客户姓名"/>
            </div>
            <div class="info-row">
              <span class="info-label">联系电话：</span>
              <input type="text" v-model="newOrder.customerPhone" class="edit-input" placeholder="请输入联系电话"/>
            </div>
            <div class="info-row">
              <span class="info-label">地址：</span>
              <textarea v-model="newOrder.customerAddress" class="edit-textarea" placeholder="请输入详细地址" rows="2"></textarea>
            </div>
            <div class="info-row">
              <span class="info-label">订单状态：</span>
              <select v-model="newOrder.status" class="edit-select">
                <option value="pending">待处理</option>
                <option value="processing">处理中</option>
                <option value="shipped">已发货</option>
                <option value="delivered">已送达</option>
              </select>
            </div>
            <div class="info-row">
              <span class="info-label">支付方式：</span>
              <select v-model="newOrder.paymentMethod" class="edit-select">
                <option value="微信支付">微信支付</option>
                <option value="支付宝">支付宝</option>
                <option value="货到付款">货到付款</option>
              </select>
            </div>
            <div class="info-row">
              <span class="info-label">物流单号：</span>
              <input type="text" v-model="newOrder.trackingNumber" class="edit-input" placeholder="选填，输入物流单号"/>
            </div>
            <div class="info-row">
              <span class="info-label">备注：</span>
              <textarea v-model="newOrder.notes" class="edit-textarea" placeholder="选填，添加订单备注" rows="3"></textarea>
            </div>
            
            <!-- 产品选择和数量输入 -->
            <div class="info-row">
              <span class="info-label">选择产品：</span>
              <select v-model="selectedProductId" class="edit-select">
                <option value="">请选择产品</option>
                <option v-for="product in products" :key="product.id" :value="product.id">
                  {{ product.name }} - ¥{{ product.price.toFixed(2) }}
                </option>
              </select>
              <input type="number" v-model="selectedProductQuantity" class="edit-input" min="1" style="width: 100px; margin-left: 10px;"/>
              <button class="add-product-button" @click="addProductToOrder" :disabled="!selectedProductId || selectedProductQuantity <= 0">
                添加产品
              </button>
            </div>
            
            <!-- 已选产品列表 -->
            <div v-if="newOrder.products.length > 0" class="selected-products">
              <h4>已选产品</h4>
              <div class="product-item" v-for="product in newOrder.products" :key="product.id">
                <span>{{ product.name }}</span>
                <span class="product-price">¥{{ product.price.toFixed(2) }}</span>
                <span class="product-quantity">数量：{{ product.quantity }}</span>
                <button class="remove-product-button" @click="removeProductFromOrder(product.id)">
                  移除
                </button>
              </div>
              <div class="total-amount">
                <strong>订单总价：¥{{ newOrder.totalAmount.toFixed(2) }}</strong>
              </div>
            </div>
          </div>
          
          <div class="form-actions">
            <button type="button" class="save-button" @click="saveNewOrder">保存</button>
          </div>
        </div>
      </div>
    </div>
  </AdminLayout>
</template>

<script>
import AdminLayout from './AdminLayout.vue'
import OrderStore from '../../services/OrderStore.js'
import ProductStore from '../../services/ProductStore.js'

export default {
  name: 'OrdersManagement',
  components: {
    AdminLayout
  },
  data() {
    return {
      orders: [],
      searchQuery: '',
      statusFilter: 'all',
      startDate: '',
      endDate: '',
      currentPage: 1,
      itemsPerPage: 10,
      showViewModal: false,
      viewedOrder: {},
      showImagePreview: false,
      previewImageUrl: '',
      selectedOrders: [],
      selectAll: false,
      importFileInput: null,
      showEditModal: false,
      editingOrder: {},
      isEditingOrder: false,
      originalOrderData: {},
      showAddOrderModal: false,
      newOrder: {
        customerName: '',
        customerPhone: '',
        customerAddress: '',
        status: 'pending',
        paymentMethod: '微信支付',
        orderNumber: '',
        orderDate: new Date().toISOString(),
        products: [],
        totalAmount: 0
      },
      products: [],
      selectedProductId: '',
      selectedProductQuantity: 1
    }
  },
  created() {
    this.loadOrders();
    OrderStore.addListener(this.handleOrdersUpdate);
    this.loadProducts();
  },
  beforeUnmount() {
    OrderStore.removeListener(this.handleOrdersUpdate);
  },
  computed: {
    filteredOrders() {
      let result = [...this.orders];
      
      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(order => 
          order.orderNumber.toLowerCase().includes(query) ||
          order.customerName.toLowerCase().includes(query) ||
          (order.customerPhone && order.customerPhone.includes(query)) ||
          (order.trackingNumber && order.trackingNumber.toLowerCase().includes(query))
        );
      }
      
      // 状态过滤
      if (this.statusFilter !== 'all') {
        result = result.filter(order => order.status === this.statusFilter);
      }
      
      // 日期范围过滤
      if (this.startDate) {
        result = result.filter(order => new Date(order.orderDate) >= new Date(this.startDate));
      }
      if (this.endDate) {
        result = result.filter(order => new Date(order.orderDate) <= new Date(this.endDate));
      }
      
      // 按订单日期降序排序
      result.sort((a, b) => new Date(b.orderDate) - new Date(a.orderDate));
      
      // 分页
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return result.slice(startIndex, endIndex);
    },
    totalPages() {
      let result = [...this.orders];
      
      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(order => 
          order.orderNumber.toLowerCase().includes(query) ||
          order.customerName.toLowerCase().includes(query) ||
          (order.customerPhone && order.customerPhone.includes(query)) ||
          (order.trackingNumber && order.trackingNumber.toLowerCase().includes(query))
        );
      }
      
      // 状态过滤
      if (this.statusFilter !== 'all') {
        result = result.filter(order => order.status === this.statusFilter);
      }
      
      // 日期范围过滤
      if (this.startDate) {
        result = result.filter(order => new Date(order.orderDate) >= new Date(this.startDate));
      }
      if (this.endDate) {
        result = result.filter(order => new Date(order.orderDate) <= new Date(this.endDate));
      }
      
      return Math.ceil(result.length / this.itemsPerPage);
    },
    visiblePages() {
      const total = this.totalPages;
      const current = this.currentPage;
      const pages = [];
      
      if (total <= 7) {
        for (let i = 1; i <= total; i++) {
          pages.push(i);
        }
      } else if (current <= 4) {
        for (let i = 1; i <= 5; i++) {
          pages.push(i);
        }
        pages.push('...', total);
      } else if (current >= total - 3) {
        pages.push(1, '...');
        for (let i = total - 4; i <= total; i++) {
          pages.push(i);
        }
      } else {
        pages.push(1, '...');
        for (let i = current - 1; i <= current + 1; i++) {
          pages.push(i);
        }
        pages.push('...', total);
      }
      
      return pages;
    }
  },
  methods: {
    handleOrdersUpdate() {
      this.orders = OrderStore.getAllOrders();
    },
    async loadOrders() {
      if (!OrderStore.isLoading) {
        await OrderStore.loadOrders();
      }
      this.orders = OrderStore.getAllOrders();
    },
    performSearch() {
      this.currentPage = 1;
    },
    resetFilters() {
      this.searchQuery = '';
      this.statusFilter = 'all';
      this.startDate = '';
      this.endDate = '';
      this.currentPage = 1;
    },
    viewOrder(id) {
      const order = OrderStore.getOrderById(id);
      if (order) {
        // 深拷贝订单对象，避免直接修改原数据
        this.viewedOrder = JSON.parse(JSON.stringify(order));
        this.originalOrderData = JSON.parse(JSON.stringify(order));
        this.isEditingOrder = false;
        this.showViewModal = true;
      }
    },
    // 切换到编辑模式
    switchToEditMode() {
      this.isEditingOrder = true;
    },
    // 取消编辑模式
    cancelEditMode() {
      // 恢复原始数据
      this.viewedOrder = JSON.parse(JSON.stringify(this.originalOrderData));
      this.isEditingOrder = false;
    },
    // 保存订单修改
    async saveOrderChanges() {
      try {
        // 实际应用中，这里应该调用API或Store方法来保存编辑后的订单
        console.log('保存编辑后的订单:', this.viewedOrder);
        
        // 模拟更新订单数据
        const updatedOrders = this.orders.map(order => 
          order.id === this.viewedOrder.id ? this.viewedOrder : order
        );
        this.orders = updatedOrders;
        
        // 更新OrderStore中的数据
        await OrderStore.updateOrder(this.viewedOrder);
        
        alert('订单更新成功');
        this.isEditingOrder = false;
        this.originalOrderData = JSON.parse(JSON.stringify(this.viewedOrder));
      } catch (error) {
        console.error('更新订单失败:', error);
        alert('更新失败，请重试');
      }
    },
    // 保存订单修改并关闭对话框
    async saveOrderChangesAndClose() {
      try {
        // 实际应用中，这里应该调用API或Store方法来保存编辑后的订单
        console.log('保存编辑后的订单:', this.viewedOrder);
        
        // 模拟更新订单数据
        const updatedOrders = this.orders.map(order => 
          order.id === this.viewedOrder.id ? this.viewedOrder : order
        );
        this.orders = updatedOrders;
        
        // 更新OrderStore中的数据
        await OrderStore.updateOrder(this.viewedOrder);
        
        alert('订单更新成功');
        this.closeViewModal();
      } catch (error) {
        console.error('更新订单失败:', error);
        alert('更新失败，请重试');
      }
    },
    // 废弃原来的编辑弹窗方法
    editOrder(order) {
      // 直接打开订单详情并进入编辑模式
      this.viewOrder(order.id);
      this.$nextTick(() => {
        this.isEditingOrder = true;
      });
    },
    closeEditModal() {
      this.showEditModal = false;
      this.editingOrder = {};
    },
    async saveEditedOrder() {
      // 这个方法已经被整合到saveOrderChanges中
      try {
        // 实际应用中，这里应该调用API或Store方法来保存编辑后的订单
        console.log('保存编辑后的订单:', this.editingOrder);
        
        // 模拟更新订单数据
        const updatedOrders = this.orders.map(order => 
          order.id === this.editingOrder.id ? this.editingOrder : order
        );
        this.orders = updatedOrders;
        
        // 更新OrderStore中的数据
        await OrderStore.updateOrder(this.editingOrder);
        
        alert('订单更新成功');
        this.closeEditModal();
      } catch (error) {
        console.error('更新订单失败:', error);
        alert('更新失败，请重试');
      }
    },
    async processOrder(order) {
      // 根据当前状态决定下一步操作
      let newStatus = '';
      let confirmMessage = '';
      
      switch (order.status) {
        case 'pending':
          newStatus = 'processing';
          confirmMessage = '确定要开始处理此订单吗？';
          break;
        case 'processing':
          newStatus = 'shipped';
          confirmMessage = '确定要标记此订单为已发货吗？';
          break;
        case 'shipped':
          newStatus = 'delivered';
          confirmMessage = '确定要标记此订单为已送达吗？';
          break;
        default:
          return;
      }
      
      if (confirm(confirmMessage)) {
        try {
          await OrderStore.updateOrderStatus(order.id, newStatus);
          // 实时更新当前订单的状态
          const updatedOrder = this.orders.find(o => o.id === order.id);
          if (updatedOrder) {
            updatedOrder.status = newStatus;
          }
          // 强制重新渲染
          this.orders = [...this.orders];
        } catch (error) {
          console.error('更新订单状态失败:', error);
          alert('更新订单状态失败，请重试');
        }
      }
    },
    async cancelOrder(id) {
      if (confirm('确定要取消此订单吗？')) {
        try {
          await OrderStore.cancelOrder(id);
          // 实时更新当前订单的状态
          const updatedOrder = this.orders.find(o => o.id === id);
          if (updatedOrder) {
            updatedOrder.status = 'canceled';
          }
          // 强制重新渲染
          this.orders = [...this.orders];
        } catch (error) {
          console.error('取消订单失败:', error);
          alert('取消订单失败，请重试');
        }
      }
    },
    
    // 切换全选
    toggleSelectAll() {
      if (this.selectAll) {
        // 全选当前页的订单
        const currentPageOrders = this.filteredOrders.map(order => order.id);
        this.selectedOrders = [...currentPageOrders];
      } else {
        // 取消全选
        this.selectedOrders = [];
      }
    },
    
    // 批量删除订单
    async batchDeleteOrders() {
      if (this.selectedOrders.length === 0) {
        alert('请选择要删除的订单');
        return;
      }
      
      if (confirm(`确定要删除选中的 ${this.selectedOrders.length} 个订单吗？`)) {
        try {
          for (const id of this.selectedOrders) {
            // 我们使用取消订单来模拟删除操作
            await OrderStore.cancelOrder(id);
          }
          this.selectedOrders = [];
          this.selectAll = false;
          alert('批量删除成功');
        } catch (error) {
          console.error('批量删除订单失败:', error);
          alert('批量删除失败，请重试');
        }
      }
    },
    
    // 导出订单数据
    exportOrders() {
      const ordersToExport = this.filteredOrders;
      const dataStr = JSON.stringify(ordersToExport, null, 2);
      const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
      
      const exportFileDefaultName = `orders_export_${new Date().toISOString().slice(0, 10)}.json`;
      
      const linkElement = document.createElement('a');
      linkElement.setAttribute('href', dataUri);
      linkElement.setAttribute('download', exportFileDefaultName);
      linkElement.click();
    },
    
    // 导入订单数据
    importOrders() {
      if (!this.importFileInput) {
        this.importFileInput = document.createElement('input');
        this.importFileInput.type = 'file';
        this.importFileInput.accept = '.json';
        this.importFileInput.style.display = 'none';
        this.importFileInput.addEventListener('change', async (event) => {
          const file = event.target.files[0];
          if (file) {
            try {
              const content = await file.text();
              const importedOrders = JSON.parse(content);
              
              // 简单验证数据格式
              if (Array.isArray(importedOrders)) {
                // 这里可以添加更多的数据验证逻辑
                alert(`成功导入 ${importedOrders.length} 个订单数据`);
                // 实际应用中，这里应该调用API或Store方法来保存导入的数据
              } else {
                throw new Error('无效的订单数据格式');
              }
            } catch (error) {
              console.error('导入订单失败:', error);
              alert('导入失败，请检查文件格式');
            }
            
            // 重置文件输入
            this.importFileInput.value = '';
          }
        });
        document.body.appendChild(this.importFileInput);
      }
      
      this.importFileInput.click();
    },
    closeViewModal() {
      this.showViewModal = false;
      this.viewedOrder = {};
    },
    showImagePreview(imageUrl) {
      this.previewImageUrl = imageUrl;
      this.showImagePreview = true;
    },
    closeImagePreview() {
      this.showImagePreview = false;
      this.previewImageUrl = '';
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      });
    },
    formatDateTime(dateString) {
      const date = new Date(dateString);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },
    getStatusText(status) {
      const statusMap = {
        pending: '待处理',
        processing: '处理中',
        shipped: '已发货',
        delivered: '已送达',
        canceled: '已取消'
      };
      return statusMap[status] || status;
    },
    getProcessButtonText(status) {
      const buttonTextMap = {
        pending: '开始处理',
        processing: '标记发货',
        shipped: '标记送达'
      };
      return buttonTextMap[status] || '处理';
    },
    // 加载产品数据
    async loadProducts() {
      try {
        // 使用全局的ProductStore实例
        if (!ProductStore.isLoading) {
          // 确保产品数据已加载
          await ProductStore.loadProducts();
        }
        this.products = ProductStore.getActiveProducts();
        if (!this.products || this.products.length === 0) {
          // 如果没有真实产品数据，使用模拟数据
          this.products = this.getMockProducts();
        }
      } catch (error) {
        console.error('加载产品失败:', error);
        // 使用模拟产品数据作为备份
        this.products = this.getMockProducts();
      }
    },
    
    // 生成模拟产品数据
    getMockProducts() {
      return [
        { id: 1, name: '智能手表 Pro', price: 1299.00, image: 'https://picsum.photos/id/1/200/200' },
        { id: 2, name: '无线耳机', price: 899.00, image: 'https://picsum.photos/id/2/200/200' },
        { id: 3, name: '平板电脑', price: 2499.00, image: 'https://picsum.photos/id/3/200/200' },
        { id: 4, name: '智能音箱', price: 399.00, image: 'https://picsum.photos/id/4/200/200' },
        { id: 5, name: '运动手环', price: 199.00, image: 'https://picsum.photos/id/5/200/200' }
      ];
    },
    
    // 添加产品到订单
    addProductToOrder() {
      if (this.selectedProductId && this.selectedProductQuantity > 0) {
        const product = this.products.find(p => p.id === parseInt(this.selectedProductId));
        if (product) {
          const existingProduct = this.newOrder.products.find(p => p.id === product.id);
          if (existingProduct) {
            // 如果产品已存在，增加数量
            existingProduct.quantity += parseInt(this.selectedProductQuantity);
          } else {
            // 添加新产品到订单
            this.newOrder.products.push({
              id: product.id,
              name: product.name,
              price: product.price,
              quantity: parseInt(this.selectedProductQuantity),
              image: product.image
            });
          }
          // 重新计算订单总价
          this.calculateTotalAmount();
          // 重置选择
          this.selectedProductId = '';
          this.selectedProductQuantity = 1;
        }
      }
    },
    
    // 从订单移除产品
    removeProductFromOrder(productId) {
      this.newOrder.products = this.newOrder.products.filter(p => p.id !== productId);
      this.calculateTotalAmount();
    },
    
    // 计算订单总价
    calculateTotalAmount() {
      this.newOrder.totalAmount = this.newOrder.products.reduce((total, product) => {
        return total + (product.price * product.quantity);
      }, 0);
    },
    // 关闭新增订单弹窗
    closeAddOrderModal() {
      this.showAddOrderModal = false;
      this.resetNewOrderForm();
    },
    // 重置新增订单表单
    resetNewOrderForm() {
      this.newOrder = {
        customerName: '',
        customerPhone: '',
        customerAddress: '',
        status: 'pending',
        paymentMethod: '微信支付',
        orderNumber: '',
        orderDate: new Date().toISOString(),
        products: [],
        totalAmount: 0
      };
    },
    // 保存新增订单
    async saveNewOrder() {
      try {
        // 验证表单
        if (!this.newOrder.customerName || !this.newOrder.customerPhone || !this.newOrder.customerAddress) {
          alert('请填写必填信息');
          return;
        }
        
        // 生成订单号
        this.newOrder.orderNumber = this.generateOrderNumber();
        
        // 实际应用中，这里应该调用API或Store方法来保存新增的订单
        console.log('保存新增订单:', this.newOrder);
        
        // 模拟添加新订单
        const orderToAdd = { ...this.newOrder, id: Date.now() };
        this.orders.unshift(orderToAdd);
        
        // 更新OrderStore中的数据
        await OrderStore.addOrder(orderToAdd);
        
        alert('订单添加成功');
        this.closeAddOrderModal();
      } catch (error) {
        console.error('添加订单失败:', error);
        alert('添加失败，请重试');
      }
    },
    // 生成订单号
    generateOrderNumber() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
      
      return `${year}${month}${day}${hours}${minutes}${seconds}${random}`;
    }
  }
}
</script>

<style scoped>
.orders-management {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

.page-header h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.import-button,
.export-button,
.batch-delete-button {
  height: 40px;
  padding: 0 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
  font-size: 14px;
}

.export-button {
  background-color: #52c41a;
  color: white;
  border-color: #52c41a;
}

.batch-delete-button {
  background-color: #f5222d;
  color: white;
  border-color: #f5222d;
}

.batch-delete-button:disabled {
  background-color: #f5f5f5;
  color: #999;
  border-color: #ddd;
  cursor: not-allowed;
}

.search-filter {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  width: 100%;
}

.search-filter-left {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  flex: 1;
}

.search-box {
  position: relative;
  min-width: 200px;
  max-width: 300px;
}

.search-box svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.search-box input {
  width: 100%;
  padding: 10px 15px 10px 45px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.filter-select select {
  padding: 10px 15px;
  min-width: 120px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background-color: white;
  cursor: pointer;
}

.date-range {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
}

.date-range input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.search-actions {
  display: flex;
  gap: 10px;
}

.search-button,
.reset-button,
.add-button {
  height: 40px;
  padding: 0 20px;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
}

.search-button {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

.add-button {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

.add-button:hover {
  background-color: #40a9ff;
  border-color: #40a9ff;
}

.reset-button {
  background-color: #f5f5f5;
  color: #333;
}

.orders-table-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
  max-height: 600px;
  overflow-y: auto;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
}

.orders-table th,
.orders-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.orders-table th:first-child,
.orders-table td:first-child {
  text-align: center;
}

.select-all-checkbox,
.order-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.orders-table th {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #333;
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.orders-table td {
  font-size: 14px;
  color: #666;
}

.order-id {
  font-family: monospace;
  font-weight: 500;
}

.products-cell {
  max-width: 200px;
}

.product-item {
  padding: 2px 0;
}

.amount {
  font-weight: 500;
  color: #333;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.pending {
  background-color: #fff3e0;
  color: #ff9800;
}

.status-badge.processing {
  background-color: #e3f2fd;
  color: #2196f3;
}

.status-badge.shipped {
  background-color: #e8f5e9;
  color: #4caf50;
}

.status-badge.delivered {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.status-badge.canceled {
  background-color: #ffebee;
  color: #f44336;
}

.action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.view-button {
  padding: 6px 12px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.view-button:hover {
  background-color: #1976d2;
}

.process-button {
  padding: 6px 12px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.process-button:hover {
  background-color: #45a049;
}

.cancel-button {
  padding: 6px 12px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.cancel-button:hover {
  background-color: #d32f2f;
}

.no-data {
  padding: 60px 20px;
  text-align: center;
  color: #999;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  margin-left: 20px;
  padding: 10px 0;
}

.pagination-button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background-color: white;
  color: #333;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  min-width: 60px;
}

.pagination-button:hover:not(:disabled) {
  background-color: #f5f5f5;
  border-color: #ccc;
}

.pagination-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 4px;
}

.page-number {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  background-color: white;
  color: #333;
}

.page-number:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
}

.page-number.active {
  background-color: #4caf50;
  color: white;
  border-color: #4caf50;
}

.pagination-info {
  margin-left: 10px;
  color: #666;
  font-size: 14px;
}

/* 限制文本长度的样式 */
.truncate {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Modal styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-content-large {
  max-width: 900px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.close-button:hover {
  background-color: #f5f5f5;
  color: #333;
}

/* 订单详情样式 */
.order-details {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.order-info,
.customer-info,
.payment-info {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 6px;
}

.order-info h4,
.customer-info h4,
.products-info h4,
.payment-info h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #333;
}

.info-row {
  display: flex;
  margin-bottom: 10px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  width: 120px;
  font-weight: 500;
  color: #666;
}

.info-value {
  flex: 1;
  color: #333;
}

.status-value {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-value.pending {
  background-color: #fff3e0;
  color: #ff9800;
}

.status-value.processing {
  background-color: #e3f2fd;
  color: #2196f3;
}

.status-value.shipped {
  background-color: #e8f5e9;
  color: #4caf50;
}

.status-value.delivered {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.status-value.canceled {
  background-color: #ffebee;
  color: #f44336;
}

.amount-value {
  font-weight: 600;
  color: #e91e63;
}

.order-products-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.order-products-table th,
.order-products-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.order-products-table th:first-child,
.order-products-table td:first-child {
  padding: 12px 8px;
}

.order-products-table th {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.order-products-table td {
  font-size: 14px;
  color: #666;
}

.total-row {
  background-color: #f9f9f9;
  font-weight: 600;
}

.total-row td:last-child {
  color: #e91e63;
}

/* 产品图片样式 */
.product-image-container {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #e0e0e0;
}

.product-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-image-container:hover .product-thumbnail {
  transform: scale(1.05);
}

/* 图片预览弹窗样式 */
.image-preview-modal {
  padding: 20px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-preview-container {
  max-width: 100%;
  max-height: 80vh;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.image-preview-modal .close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  z-index: 10;
}

.image-preview-modal .close-button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Search actions styles */
.search-actions {
  display: flex;
  gap: 10px;
}

.search-button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-button:hover {
  background-color: #45a049;
}

.reset-button {
  padding: 10px 20px;
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reset-button:hover {
  background-color: #e0e0e0;
  border-color: #ccc;
}

/* Responsive design */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .search-filter {
    flex-direction: column;
    align-items: stretch;
  }
  
  .date-range {
    flex-direction: column;
    align-items: stretch;
  }
  
  .orders-table-container {
    overflow-x: auto;
  }
  
  .orders-table {
    min-width: 800px;
  }
  
  .modal-content {
    margin: 20px;
    padding: 20px;
  }
  
  .info-row {
    flex-direction: column;
  }
  
  .info-label {
    width: auto;
    margin-bottom: 5px;
  }
}

/* 编辑模式输入框样式 */
.edit-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.edit-input:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.edit-input-small {
  width: 80px;
  padding: 4px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.edit-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
  min-height: 60px;
}

.edit-textarea:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.edit-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
  cursor: pointer;
}

.edit-select:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 表单操作按钮样式 */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.save-button {
  padding: 8px 20px;
  background-color: #52c41a;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.save-button:hover {
  background-color: #73d13d;
}

/* 编辑按钮样式 */
.edit-button {
  padding: 8px 20px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.edit-button:hover {
  background-color: #40a9ff;
}

/* 订单表单样式 - 添加蓝色边框和滚动条 */
.order-form {
  border: 2px solid #1890ff;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fafafa;
}

/* 信息行样式 - 确保输入框和选择框竖向对齐 */
.order-form .info-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 15px;
}

.order-form .info-label {
  width: 120px;
  flex-shrink: 0;
  font-weight: 500;
  color: #333;
  padding-top: 8px;
}

.order-form .edit-input,
.order-form .edit-select,
.order-form .edit-textarea {
  flex: 1;
  align-self: flex-start;
}

/* 滚动条样式 */
.order-form::-webkit-scrollbar {
  width: 8px;
}

.order-form::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.order-form::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.order-form::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 新增订单弹窗样式 */
.add-order-modal {
  max-width: 700px;
}

/* 使新增按钮样式更醒目 */
.add-product-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.add-product-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.selected-products {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
}

.product-price {
  color: #f44336;
  font-weight: bold;
}

.product-quantity {
  color: #666;
}

.remove-product-button {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.total-amount {
  margin-top: 15px;
  text-align: right;
  color: #333;
}

/* 表单操作按钮样式 */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.save-button {
  padding: 8px 20px;
  background-color: #52c41a;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.save-button:hover {
  background-color: #73d13d;
}

/* 编辑按钮样式 */
.edit-button {
  padding: 8px 20px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.edit-button:hover {
  background-color: #40a9ff;
}

/* 分页控件样式 - 统一并调整位置 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  margin-left: 20px;
  padding: 10px 0;
}

.pagination-button {
  padding: 6px 12px;
  background-color: #fff;
  color: #333;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 60px;
  text-align: center;
}

.pagination-button:hover:not(:disabled) {
  color: #1890ff;
  border-color: #1890ff;
}

.pagination-button:disabled {
  color: #d9d9d9;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 4px;
}

.page-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #333;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.page-number:hover {
  color: #1890ff;
  border-color: #1890ff;
}

.page-number.active {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

.pagination-info {
  margin-left: 16px;
  color: #666;
  font-size: 14px;
}
</style>